<script setup lang="ts">
import LayLayer from './components/layer/src/LayLayer.vue'
import {ref} from "vue";

const visible = ref({
  v0: false,
  v1: false,
  v2: false,
  v3: false,
  v4: true,
  v5: false
})

</script>

<template>
  <div class="btn-group">
    <button @click="visible.v0 = !visible.v0">0</button>
    <button @click="visible.v1 = !visible.v1">1</button>
    <button @click="visible.v2 = !visible.v2">2</button>
    <button @click="visible.v3 = !visible.v3">3</button>
    <button @click="visible.v4 = !visible.v4">4</button>
    <button @click="visible.v5 = !visible.v5">5</button>
  </div>

  <LayLayer v-model:visible="visible.v0">
    <template #title>初体验</template>
    Hi，你好！ 点击确认更换图标
  </LayLayer>

  <LayLayer v-model:visible="visible.v1" :type="1">
    <template #title>初体验</template>
    Hi，你好！ 点击确认更换图标
  </LayLayer>

  <LayLayer v-model:visible="visible.v4" :type="4">
    <div class="btn">这是一个按钮</div>
  </LayLayer>
</template>

<style>
  .btn-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .btn-group :not(:first-child) {
    margin-left: 1em;
  }

  .btn {
    box-sizing: border-box;
    padding: 1em;
    border: 1px solid red;
  }
</style>
